<template>
  <div class="_wrap">
    <div class="_box">
      <subTit title="历年装备支出金额趋势"/>
      <div class="__num">
        <div class="label">本年装备支出金额：</div>
        <count-to ref="countTo1" class="val" :start-val="0" :end-val="6635" :decimals="0" :duration="3600" /><span class="unit">万元</span>
      </div>
      <div class="chartBox">
        <eChart :option="option1"></eChart>
      </div>
    </div>
    <div class="_box">
      <subTit title="历年基建支出金额趋势"/>
      <div class="__num">
        <div class="label">本年基建支出金额：</div>
        <count-to ref="countTo2" class="val" :start-val="0" :end-val="123652" :decimals="0" :duration="3600" /><span class="unit">万元</span>
      </div>
      <div class="chartBox">
        <eChart :option="option2"></eChart>
      </div>
    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  import subTit from '../components/subTit'
  export default {
    name: 'itemCenterB3',
    components: { countTo, subTit },
    data() {
      return {
        interval: null,
        option1: {},
        option2: {}
      }
    },
    beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
    mounted() {
      this.handleStart()
      let obj1 = {
        xAxisData: ['2019年', '2020年', '2021年', '2022年', '2023年'],
        seriesData: [6023, 6231, 6952, 6364, 6452]
      }
      let obj2 = {
        xAxisData: ['2019年', '2020年', '2021年', '2022年', '2023年'],
        seriesData: [11658, 11622, 12695, 13264, 12452]
      }
      this.option1 = this.getOption(obj1, ['rgba(0,255,250, .54)', 'rgba(0,255,250, .04)'])
      this.option2 = this.getOption(obj2, ['rgba(8,132,255, .54)', 'rgba(8,132,255, .04)'])
    },
    methods: {
      handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          this.$refs.countTo1.start()
          this.$refs.countTo2.start()
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      },
      getOption({xAxisData, seriesData}, colors){
        return {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: colors[0] // 0% 处的颜色
            }, {
              offset: 1, color: colors[1] // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          grid: {
            left: '15px',
            right: '20px',
            top: '50px',
            bottom: '10px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params) => {
              let html = ''
              for (let i = 0; i < params.length; i++) {
                const formatNum = (value) => {
                  if(!value&&value!==0) return 0;
                  let str = value.toString();
                  let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                  return str.replace(reg,"$1,");
                }
                let val = params[i].value ? params[i].value : 0
                let name = i===0 ? `<div>${params[i].name}</div>` : ''
                html += `
                  <div class="tooltip">
                    ${name}
                    <div class="item">
                        <div class="${i>1?'marker':''}">${params[i].marker}</div>${params[i].seriesName}<span>${formatNum(val)}</span>万元
                    </div>
                  </div>
                `
              }
              return html
            },
            textStyle: {
              // fontSize: 32,
              color: '#fff'
            },
            borderColor: 'rgba(0,161,255,0.42)', // transparent
            backgroundColor: ' rgba(1,33,59,0.65)', // transparent
            padding: [5, 10]
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: xAxisData,

            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255, .16)',
              }
            },
            axisLabel: {
              // rotate: -30,
              interval: 0,
              fontSize: 14,
              color: 'rgba(255,255,255,0.8)'
            }
          },
          yAxis: [
            {
              name: '万元',
              type: 'value',
              min: 0,
              // max: 500,
              // interval: 100,
              nameTextStyle: {
                align: 'center',
                fontSize: 16,
                color: '#fff'
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                color: 'rgba(255,255,255,0.8)'
              },
              splitLine: {
                show: true, // 是否显示分隔线
                lineStyle: {
                  color: 'rgba(255,255,255,0.16)',
                  type: 'dashed',
                  width: 1
                }
              },
              axisLine: {
                show: false
              },
              splitArea: {
                show: false // 是否显示分隔区域
              }
            },
          ],
          series: [
            {
              name: '支出金额',
              data: seriesData,
              type: 'line',
              smooth: false,
              areaStyle: {},
              // barMaxWidth: 18,
              // itemStyle: {
              //   //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              //   barBorderRadius:[0, 0, 0, 0]
              // },
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
            }
          ]
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px;
    ._box {
      background: rgba(0,16,43,0.32); border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
      overflow: hidden; height: 290px;
      .__subTit { margin-top: -4px; margin-left: -3px; }
    }
    .__num {
      display: flex; align-items: center; justify-content: center; margin-top: 10px;
      img { width: 32px; height: 32px; margin-right: 16px; }
      .val { font-size: 24px; color: #00FFFA; letter-spacing: 1.44px; font-family: DINPro; }
      .unit { font-size: 16px; font-family: PingFangSC; margin-left: 8px; }
      .label { font-size: 16px; font-family: PingFangSC; color: rgba(255,255,255,1); margin-right: 10px; }
    }
    .chartBox {
      height: 210px;
    }
    ::v-deep .tooltip {
      .item {
        display: flex; align-items: center; color: rgba(255,255,255,.8);
        .marker { visibility:hidden }
        span { color: #00FFFA; font-family: DINPro; font-size: 16px; margin: 0 6px; }
      }
    }
  }
</style>
